<template>
	<div id='tmpl'>
		<!-- 1.0 实现新闻详情 -->
		<div class='title'>
			<h4 v-text='info.title'></h4>
			<p>{{info.add_time | datefmt('YYYY-MM-DD')}}&nbsp;&nbsp;&nbsp;浏览次数{{info.click}}</p>
		</div>
		<div id='content' v-html='info.conent'>
		</div>

		<!-- 2.0 实现新闻评论 -->
		<comment :id='id'></comment>
	</div>
</template>
<script>
	import comment from '../subcom/comment.vue'

	export default{
		components:{
			comment
		},
		data(){
			return {
				id:0,
				info:
				// 以数据形式写，有个问题：跟前面路由冲突，只会以索引0开始传参
				// [
				// 	{
				// 		'id':0,
				// 		'title':'1季度多家房企利润跌幅50% 打响去库存战',
				// 		'add_time':'2015-04-16T12:50:28+08:00',
				// 		'click':1,
				// 		'conent':'<strong>Hello</strong> Vue!-1'
				// 	},
				// 						{
				// 		'id':1,
				// 		'title':'2季度多家房企利润跌幅50% 打响去库存战',
				// 		'add_time':'2015-04-16T12:50:28+08:00',
				// 		'zhaiyao':'房企一季度销售业绩已经陆续公布，统计',
				// 		'click':2,
				// 		'conent':'<strong>Hello</strong> Vue!-2'
				// 	},
				// 	{
				// 		'id':2,
				// 		'title':'3季度多家房企利润跌幅50% 打响去库存战',
				// 		'add_time':'2015-04-16T12:50:28+08:00',
				// 		'click':3,
				// 		'conent':'<strong>Hello</strong> Vue!-3'
				// 	}
				// ]
					{
						'id':1,
						'title':'1季度多家房企利润跌幅50% 打响去库存战',
						'add_time':'2015-04-16T12:50:28+08:00',
						'click':1,
						'conent':'<strong>Hello</strong> Vue!,因为目前只有一条数据所以只能显示一条<br>值得一提的是v-html标签可以对字符进行重新转义,让浏览器重新识别'
					}
			}
		},
		// 使用ajax获取动态数据
		created(){
			// 1.0获取url传入的id参数赋值给data中id属性
			this.id=this.$route.params.id;

		// 	// 2.0 请求服务器获取到这个id对应的详情数据对象
		// 	this.getinfo();
		}
		// methods:{
		// 	getinfo(){
		// 		var url='http://www.baidu.com/'+this.id;
		// 		this.$http.get(url).then(function(res){
		// 			var body=res.body;
		// 			if(body.status != 0){
		// 				alert(body.message)
		// 				return;
		// 			}
		// 			this.info=body.message[0]
		// 		})
		// 	}
		// }
	}
</script>
<style scoped>
	.title h4{
		color:rgb(38,162,255);
	}
	.title{
		border-bottom:1px solid #f5f5f5;
	}
	.title,#content{
		padding:10px 5px 5px 5px;
	}
	.title p{
		padding: 2px;
		height: 10px;
	}
</style>